<template>
    <div class="order-info-container">
        <div class="header-box acea-row row-middle van-hairline--bottom">
            <img :src="leftIcon" alt="order_info_head_icon" class="order-info-head-icon">
            <div>四川理工大学第四实验楼</div>
        </div>
        <div class="acea-row row-middle">
            <div class="title-name">第四实验楼拍摄征集活动</div>
            <Tag plain color="#0DCDB5" text-color="#0DCDB5" v-if="true">正常</Tag>
            <Tag plain color="#FF8D51" text-color="#FF8D51" v-else>已结束</Tag>
        </div>
        <div class="creat-time">2020-01-12 15:23:29</div>
        <div class="order-text">四川理工大学第四实验楼，第四实验楼拍摄征集活动，四川理工大学第四实验楼。四川理工大学第四实验楼，第四实验楼拍摄征集活动，四川理工大学第四实验楼。
            四川理工大学第四实验楼，第四实验楼拍摄征集活动，四川理工大学第四实验楼。四川理工大学第四实验楼，第四实验楼拍摄征集活动，四川理工大学第四实验楼。
        </div>
        <div class="active-time">活动时间</div>
        <div class="time-box">
            <div class="acea-row row-middle time-box-item van-hairline--bottom">
                <img :src="sTimeIcon" alt="s-time" class="time-icon">
                <div class="time-text"> 2020-01-12 15:23:29  开始</div>
            </div>
            <div class="acea-row row-middle time-box-item">
                <img :src="eTimeIcon" alt="e-time" class="time-icon">
                <div class="time-text"> 2020-01-12 15:23:29  结束</div>
            </div>
        </div>
        <div class="shoot-site">拍摄点位</div>
        <div class="site-item acea-row row-middle van-hairline--bottom">四川理工大学第四实验楼北面</div>
        <div class="site-item acea-row row-middle van-hairline--bottom">四川理工大学第四实验楼北面</div>
        <div class="site-item acea-row row-middle van-hairline--bottom">四川理工大学第四实验楼北面</div>
        <div class="submit-bar acea-row row-middle row-between van-hairline--top">
            <div class="acea-row row-middle">
                <div class="price-text">金额</div>
                <div class="price">¥300.00</div>
            </div>
            <Button :icon="btnIcon" color="#FF8D51" class="bottom-btn" size="large" v-if="true">我要抢单</Button>
            <Button color="#F7F8FC" class="bottom-btn pass-btn" size="large " :disabled="true" v-else>已抢单</Button>
        </div>
    </div>
</template>

<script>
    import {Tag,Button } from 'vant';

    const loadImg = name => require(`@/assets/images/${name}.png`)

    export default {
        name: "orderInfo",
        components: {
            Tag,
            Button
        },
        data() {
            return {
                leftIcon: loadImg('order_info_head-icon'),
                sTimeIcon:loadImg('order_start_time'),
                eTimeIcon:loadImg('order_end_time'),
                btnIcon: loadImg('Lightning'),
            }
        }
    }
</script>

<style scoped lang="scss">
    .order-info-container {
        flex: 1;
        overflow-y: auto;
        padding: 0 20px;
        background-color: #fff;
        &::after{
            content: ' ';
            display: block;
            width: 100%;
            height: 80px;
        }
        .header-box {
            height: 80px;
            font-size: 16px;
            font-weight: 500;
            color: rgba(66, 69, 95, 1);
            margin-bottom: 30px;

            .order-info-head-icon {
                width: 30px;
                height: 30px;
                margin-right: 20px;
            }
        }

        .title-name {
            font-size: 18px;
            font-weight: 500;
            color: rgba(66, 69, 95, 1);
            margin-right: 15px;
        }

        .creat-time {
            font-size: 12px;
            font-weight: 400;
            color: rgba(163, 165, 177, 1);
            margin-top: 10px;
        }

        .order-text {
            font-size: 14px;
            font-weight: 400;
            color: rgba(66, 69, 95, 1);
            margin-top: 25px;
        }
        .active-time{
            font-size:16px;
            font-weight:500;
            color:rgba(66,69,95,1);
            margin-top: 30px;
        }
        .time-box{
            width:335px;
            height:120px;
            background:rgba(247,248,252,1);
            border-radius:8px;
            padding: 0 20px;
            margin-top: 20px;
            .time-box-item{
                height: 50%;
            }
            .time-icon{
                width: 20px;
                height: 20px;
            }
            .time-text{
                font-size:14px;
                font-weight:500;
                color:rgba(66,69,95,1);
                margin-left: 20px;
            }
        }
        .shoot-site{
            font-size:16px;
            font-weight:500;
            color:rgba(66,69,95,1);
            margin-top: 30px;
        }
        .site-item{
            height: 50px;
            font-size:14px;
            font-weight:400;
            color:rgba(66,69,95,1);
        }
        .submit-bar{
            height: 80px;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2;
            padding: 0 20px;
            background-color: #fff;
            .price-text{
                font-size:16px;
                font-weight:400;
                color:rgba(66,69,95,1);
            }
            .price{
                font-size:16px;
                font-weight:500;
                color:rgba(255,141,81,1);
                margin-left: 10px;
            }
            .bottom-btn {
                width:120px;
                height:40px;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 400;
            }

            .pass-btn {
                color: #A3A5B1;
            }
        }
    }

</style>
